<template>
  <div class="agreement-page" >

    <div class="content">
      <div class="header">
        <h1 class="title">关于我们</h1>
        <div class="update-time">更新时间：2025年8月1日</div>
      </div>

      <div class="agreement-content">
        <section class="section">
          <h2 style="text-align: center;margin-bottom: 20rpx;">平台简介</h2>
          <p style="text-indent: 2em;">我们是一家专注于校园生活的服务平台，致力于为校园提供便捷、高效的餐饮及生活服务。通过整合优质商家资源，搭建连接用户与商家的桥梁，为校园提供便捷的服务业务，优化校园生活体验。</p>
        </section>

        <section class="section">
          <h2>一、核心业务</h2>
          <ul>
            <li>
              <p style="text-indent: 2em;">校园外卖配送：与校内食堂、商家合作，提供在线点餐及配送服务。</p>
            </li>
          </ul>
        </section>

        <section class="section">
          <h2>二、平台功能</h2>
          <ul>
            <li>
              <p style="text-indent: 2em;">智能下单系统：用户可通过微信小程序一键下单，填写需求、地址等信息。</p>
            </li>
          </ul>
        </section>

        <section class="section">
          <h2>三、服务优势</h2>
          <ul>
            <li>
              <p style="text-indent: 2em;">高效便捷：解决校内出行、排队耗时问题，提升时间利用率。</p>
            </li>
            <li>
              <p style="text-indent: 2em;">安全可靠：实名认证骑手，订单全程可追溯，保障隐私与物品安全。</p>
            </li>
          </ul>
        </section>

        <section class="section">
          <h2>加入我们</h2>
          <p style="text-indent: 2em;">如果您是商家，想入驻平台拓展客源，可点击"商家入驻"按钮，提交相关资料，我们将在 3 个工作日内与您联系。</p>
          <p style="text-indent: 2em;">如果您想加入我们成为骑手，在闲暇之余赚取零花钱，可点击"骑手申请"按钮，提交相关资料，我们将在 3 个工作日内与您联系。</p>

        </section>

        <section class="section">
          <h2>相关资质</h2>
          <ul>
            <li>
              <p style="text-indent: 2em;">营业执照</p>
              <img :src="imagesList[0]" alt="" @click="previewImage(imagesList[0])" class="clickable-image">
            </li>
            <li>
              <p style="text-indent: 2em;">增值电信业务许可证</p>
              <img :src="imagesList[1]" alt="" @click="previewImage(imagesList[1])" class="clickable-image">
            </li>
            <li>
              <p style="text-indent: 2em;">网络食品安全第三方备案</p>
              <img :src="imagesList[2]" alt="" @click="previewImage(imagesList[2])" class="clickable-image">
            </li>
          </ul>
        </section>
      </div>
    </div>

    <!-- 图片预览弹窗 -->
    <div v-if="showPreview" class="image-preview-overlay" @click="closePreview">
      <div class="image-preview-content" @click.stop>
        <img :src="previewImageUrl" alt="" class="preview-image">
        <div class="preview-close" @click="closePreview">×</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import Return from '@/components/Return.vue'
import { Fetch } from '@/composables/useFetch'
import { useUserStore } from '@/stores/user'

const capsuleTop = ref(0)
const userStore = useUserStore()
const userInfo = userStore.customerInfo

// 图片预览相关状态
const showPreview = ref(false)
const previewImageUrl = ref('')

// 图片预览方法
const previewImage = (imageUrl) => {
  if (imageUrl) {
    previewImageUrl.value = imageUrl
    showPreview.value = true
  }
}

// 关闭预览
const closePreview = () => {
  showPreview.value = false
  previewImageUrl.value = ''
}

const calcCapsuleTop = () => {
  // #ifdef MP-WEIXIN
  const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
  capsuleTop.value = menuButtonInfo.bottom + 20
  // #endif
}

onMounted(() => {
  calcCapsuleTop()
})

onShow(() => {
  getBanner()
})

const imagesList = ref([])
const getBanner = async () => {
  const { data } = await Fetch('shopping/dict/data/type/imag_list', { method: 'get' })
  if (data.code === 200) {

    data.data.map(item => {
      if (item.dictLabel == '关于我们') {
        imagesList.value.push(item.dictValue)
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.agreement-page {
  min-height: 100vh;
  background-color: #f8f9fa;
}

.content {
  padding: 0 40rpx 40rpx;
}

.header {
  text-align: center;
  padding: 40rpx 0;
  background: white;
  margin-bottom: 20rpx;
  border-radius: 16rpx;

  .title {
    font-size: 48rpx;
    font-weight: bold;
    color: #191919;
    margin-bottom: 16rpx;
  }

  .update-time {
    font-size: 24rpx;
    color: #999;
  }
}

.agreement-content {
  background: white;
  border-radius: 16rpx;
  padding: 40rpx;

  .section {
    margin-bottom: 40rpx;
    text-align: justify;

    &:last-child {
      margin-bottom: 0;
    }

    h2 {
      font-size: 32rpx;
      font-weight: bold;
      color: #191919;
      margin-bottom: 20rpx;
    }

    p {
      font-size: 28rpx;
      color: #666;
      line-height: 1.6;
      margin-bottom: 16rpx;

      &:last-child {
        margin-bottom: 0;
      }
    }

    ul {
      padding-left: 32rpx;

      li {
        font-size: 28rpx;
        color: #666;
        line-height: 1.6;
        margin-bottom: 12rpx;
        list-style: disc;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }

    .action-btns {
      margin-top: 20rpx;
    }
  }
}

// 可点击图片样式
.clickable-image {
  cursor: pointer;
  transition: transform 0.2s ease;
  margin: 20rpx 0;

  &:hover {
    transform: scale(1.02);
  }

  &:active {
    transform: scale(0.98);
  }
}

// 图片预览弹窗样式
.image-preview-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-preview-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8rpx;
}

.preview-close {
  position: absolute;
  top: -60rpx;
  right: 0;
  width: 60rpx;
  height: 60rpx;
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40rpx;
  cursor: pointer;
  transition: background-color 0.2s ease;

  &:hover {
    background-color: rgba(255, 255, 255, 0.3);
  }
}
</style>
